<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">活动详情</view>
			<view class="share-btn" @tap="shareActivity">
				<text class="share-icon">↗</text>
			</view>
		</view>
		
		<!-- 活动内容 -->
		<view class="activity-content" v-if="activity">
			<!-- 活动头图 -->
			<image class="activity-banner" :src="activity.image" mode="aspectFill"></image>
			
			<!-- 活动信息 -->
			<view class="activity-header">
				<view class="title-section">
					<text class="activity-title">{{ activity.title }}</text>
					<view class="activity-tag" :style="{ backgroundColor: getTagColor(activity.type) }">
						{{ activity.type }}
					</view>
				</view>
				
				<view class="activity-meta">
					<view class="meta-item">
						<text class="meta-icon">🕒</text>
						<text class="meta-text">{{ activity.time }}</text>
					</view>
					<view class="meta-item">
						<text class="meta-icon">📍</text>
						<text class="meta-text">{{ activity.location }}</text>
					</view>
				</view>
			</view>
			
			<!-- 活动描述 -->
			<view class="activity-desc">
				<view class="section-title">
					<text class="title-text">活动介绍</text>
					<view class="title-line"></view>
				</view>
				
				<text class="desc-content">{{ activity.content }}</text>
			</view>
			
			<!-- 活动规则 -->
			<view class="activity-rules">
				<view class="section-title">
					<text class="title-text">活动规则</text>
					<view class="title-line"></view>
				</view>
				
				<view class="rule-item" v-for="(rule, index) in rules" :key="index">
					<text class="rule-number">{{ index + 1 }}</text>
					<text class="rule-text">{{ rule }}</text>
				</view>
			</view>
			
			<!-- 活动奖励 -->
			<view class="activity-rewards">
				<view class="section-title">
					<text class="title-text">活动奖励</text>
					<view class="title-line"></view>
				</view>
				
				<view class="rewards-grid">
					<view class="reward-item" v-for="(reward, index) in rewards" :key="index">
						<image class="reward-image" :src="reward.image" mode="aspectFit"></image>
						<text class="reward-name">{{ reward.name }}</text>
						<text class="reward-value">{{ reward.value }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作区 -->
		<view class="bottom-actions">
			<view class="countdown" v-if="activity">
				<text class="countdown-label">活动剩余时间</text>
				<text class="countdown-value">{{ countdown }}</text>
			</view>
			
			<button class="action-btn join-btn" @tap="joinActivity">立即参与</button>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-container" v-if="isLoading">
			<view class="spinner"></view>
			<text class="loading-text">加载中...</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			activityId: null,
			activity: null,
			isLoading: true,
			countdown: '3天 05:23:11',
			rules: [
				'参与活动需要完成指定任务才能获得相应奖励。',
				'活动期间，每位用户只能领取一次相同奖励。',
				'活动奖励将在活动结束后7个工作日内发放到账户中。',
				'本活动最终解释权归平台所有。'
			],
			rewards: [
				{
					name: '金币',
					value: 'x1000',
					image: '/static/images/task/coin.png'
				},
				{
					name: '宝石',
					value: 'x50',
					image: '/static/images/task/gem.png'
				},
				{
					name: '限定头像框',
					value: 'x1',
					image: '/static/images/activity/avatar-frame.png'
				}
			]
		};
	},
	onLoad(options) {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
		
		// 获取活动ID
		if (options.id) {
			this.activityId = options.id;
			this.loadActivityDetail();
		} else {
			uni.showToast({
				title: '获取活动详情失败',
				icon: 'none'
			});
			setTimeout(() => {
				this.goBack();
			}, 1500);
		}
	},
	methods: {
		// 加载活动详情
		loadActivityDetail() {
			this.isLoading = true;
			
			// 模拟网络请求
			setTimeout(() => {
				// 这里应该是调用API获取活动详情
				// 现在先使用模拟数据
				const activities = [
					{
						id: 101,
						title: '记忆翻牌大赛',
						description: '测试你的记忆力，挑战最快完成时间',
						image: '/static/images/activity/memory.jpg',
						type: '竞赛',
						time: '2025.5.1-2025.5.15',
						location: '记忆翻牌游戏',
						content: '参与记忆翻牌游戏，在规定时间内完成配对，根据完成时间和错误率进行排名，前10名玩家将获得精美礼品和游戏内道具。\n\n活动期间，每日登录游戏并完成至少一局记忆翻牌游戏，可获得额外的活动积分。积分可在活动商店兑换丰厚奖励。\n\n挑战自我，超越极限，成为记忆大师！'
					},
					{
						id: 102,
						title: '双倍经验周',
						description: '所有游戏经验翻倍，冲级好时机',
						image: '/static/images/activity/exp.jpg',
						type: '限时',
						time: '2025.5.5-2025.5.12',
						location: '全部游戏',
						content: '活动期间内，所有游戏的经验获取都将翻倍，是提升等级和解锁新内容的绝佳机会。同时，每日登录还将获得额外奖励。\n\n在活动期间，每天完成指定任务，还可以获得额外的经验加成，最高可达5倍经验！\n\n不要错过这次冲级良机，让你的游戏角色快速提升！'
					},
					{
						id: 103,
						title: '塔防守卫者',
						description: '新游戏"元素守护者"抢先体验',
						image: '/static/images/activity/tower.jpg',
						type: '新游',
						time: '2025.5.10起',
						location: '游戏中心',
						content: '全新策略塔防游戏"元素守护者"即将上线，参与预约即可获得游戏内稀有道具和首充双倍福利。游戏正式上线后，还有丰厚的新手礼包等你来领取。\n\n预约并在游戏上线后7天内登录，还可以获得限定守护者角色一名，这个角色在游戏中拥有强大的元素掌控能力，是战斗的一大助力！'
					},
					{
						id: 104,
						title: '五一劳动节活动',
						description: '劳动节特别活动，赢取专属头像框',
						image: '/static/images/activity/labor.jpg',
						type: '节日',
						time: '2025.5.1-2025.5.7',
						location: '全平台',
						content: '五一劳动节期间，参与指定任务即可获得限定头像框和个性装扮。每日登录还可抽取神秘大奖，最高可得稀有皮肤或1000游戏币。\n\n活动期间内，将推出劳动节主题装扮和限时商品，购买后永久拥有。\n\n快来参与劳动节庆祝活动，用奖励装点你的游戏形象！'
					},
					{
						id: 105,
						title: '饼干制作大师',
						description: '比拼饼干产量，争夺饼干之王称号',
						image: '/static/images/activity/cookie.jpg',
						type: '竞赛',
						time: '2025.5.8-2025.5.22',
						location: '饼干点击者',
						content: '在饼干点击者游戏中，比拼两周内的饼干总产量，获得最高产量的玩家将获得"饼干之王"称号和限定装扮，以及丰厚的游戏内奖励。\n\n活动期间每天都有不同的饼干制作目标，完成目标可获得特殊奖励和加成道具。\n\n是时候展现你的点击技巧，成为饼干制作界的传奇了！'
					}
				];
				
				// 根据ID查找活动
				this.activity = activities.find(item => item.id == this.activityId);
				
				if (!this.activity) {
					uni.showToast({
						title: '活动不存在',
						icon: 'none'
					});
					setTimeout(() => {
						this.goBack();
					}, 1500);
				}
				
				this.isLoading = false;
			}, 800);
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 分享活动
		shareActivity() {
			if (!this.activity) return;
			
			uni.showActionSheet({
				itemList: ['分享给好友', '分享到朋友圈', '复制链接'],
				success: (res) => {
					// 处理分享逻辑
					uni.showToast({
						title: '分享成功',
						icon: 'success'
					});
				}
			});
		},
		
		// 参与活动
		joinActivity() {
			if (!this.activity) return;
			
			// 根据活动类型进行不同的跳转
			switch(this.activity.type) {
				case '竞赛':
					if (this.activity.id == 101) {
						// 记忆翻牌大赛
						uni.navigateTo({
							url: '/pages/game/index'
						});
					} else if (this.activity.id == 105) {
						// 饼干制作大师
						uni.navigateTo({
							url: '/pages/cookie-clicker/index'
						});
					}
					break;
				case '新游':
					// 塔防守卫者
					uni.navigateTo({
						url: '/pages/game-center/index'
					});
					break;
				case '限时':
				case '节日':
					// 通用活动
					uni.showToast({
						title: '已成功参与活动',
						icon: 'success'
					});
					break;
			}
		},
		
		// 获取标签颜色
		getTagColor(type) {
			const colorMap = {
				'竞赛': '#ff9800',
				'限时': '#4caf50',
				'新游': '#9c27b0',
				'节日': '#e91e63'
			};
			
			return colorMap[type] || '#1a73e8';
		}
	}
};
</script>

<style>
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

/* 导航栏 */
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #1a73e8;
	height: 88rpx;
	padding: 0 30rpx;
}

.back-btn, .share-btn {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}

.back-icon, .share-icon {
	font-size: 40rpx;
	color: #ffffff;
}

.nav-title {
	flex: 1;
	text-align: center;
	font-size: 34rpx;
	font-weight: 600;
	color: #ffffff;
}

/* 活动内容 */
.activity-content {
	padding-bottom: 120rpx; /* 底部操作区的高度 */
}

.activity-banner {
	width: 100%;
	height: 400rpx;
}

.activity-header {
	padding: 30rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
}

.title-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.activity-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	flex: 1;
}

.activity-tag {
	font-size: 22rpx;
	color: #ffffff;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
}

.activity-meta {
	display: flex;
	justify-content: space-between;
}

.meta-item {
	display: flex;
	align-items: center;
}

.meta-icon {
	margin-right: 10rpx;
	font-size: 28rpx;
}

.meta-text {
	font-size: 26rpx;
	color: #666;
}

/* 活动描述 */
.activity-desc, .activity-rules, .activity-rewards {
	margin: 0 30rpx 30rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.title-text {
	font-size: 30rpx;
	font-weight: 600;
	color: #333;
	margin-right: 20rpx;
}

.title-line {
	flex: 1;
	height: 2rpx;
	background: linear-gradient(to right, #1a73e8, transparent);
}

.desc-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

/* 活动规则 */
.rule-item {
	display: flex;
	margin-bottom: 15rpx;
}

.rule-item:last-child {
	margin-bottom: 0;
}

.rule-number {
	width: 40rpx;
	height: 40rpx;
	background-color: #1a73e8;
	color: #ffffff;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	margin-right: 15rpx;
	flex-shrink: 0;
}

.rule-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.4;
}

/* 活动奖励 */
.rewards-grid {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.reward-item {
	width: 30%;
	background-color: #f9f9f9;
	border-radius: 15rpx;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20rpx;
}

.reward-image {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 15rpx;
}

.reward-name {
	font-size: 26rpx;
	color: #333;
	margin-bottom: 8rpx;
}

.reward-value {
	font-size: 24rpx;
	color: #ff9800;
	font-weight: 600;
}

/* 底部操作区 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #ffffff;
	padding: 20rpx 30rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 100;
}

.countdown {
	display: flex;
	flex-direction: column;
}

.countdown-label {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 5rpx;
}

.countdown-value {
	font-size: 28rpx;
	color: #ff5252;
	font-weight: 600;
}

.action-btn {
	border: none;
	border-radius: 40rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
	padding: 0 60rpx;
}

.join-btn {
	background-color: #1a73e8;
	color: #ffffff;
}

/* 加载状态 */
.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.spinner {
	width: 80rpx;
	height: 80rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #1a73e8;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 30rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
</style> 